<template>
  <div>
    <a-modal ref="modalRef" :mask="false" :footer="null" :closable="false" width="526px" v-model:open="showModal"
             :bodyStyle="{padding:0}" :maskClosable="false"
             :wrap-style="{margin:0, overflow: 'hidden',cursor: 'move' }" @ok="handleOk">
      <div class="pading20">
        <div class="">
          <div class="titles">8888888888</div>
          <a-table
              :columns="columns"
              :data-source="data"
              :scroll="{ y: 240 }"
              :pagination="false"
          />
        </div>
        <div class="mtop30">
          <div class="titles">8888888888</div>
          <a-table
              :columns="columns"
              :data-source="data"
              :scroll="{ y: 240 }"
              :pagination="false"
          />
        </div>

      </div>
      <template #title>
        <div ref="modalTitleRef" class="mores">
          <div>BOM清单 959689587AAAA</div>
          <div class="moresRight">
            <img :src="m501"/>
            <img :src="m502"/>
            <img :src="m503" @click="handleOk"/>
          </div>
        </div>
      </template>
      <template #modalRender="{ originVNode }">
        <div :style="transformStyle">
          <component :is="originVNode"/>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import {ref, computed, CSSProperties, watch, watchEffect} from 'vue';
import {useDraggable} from '@vueuse/core';
import {useCommomStore} from "@/pinia/store/commom.pinia"
import {storeToRefs} from 'pinia';

import m501 from "../../assets/img/m501.png"
import m502 from "../../assets/img/m502.png"
import m503 from "../../assets/img/m503.png"

const storeCommomStore = useCommomStore();
const {showModal} = storeToRefs(storeCommomStore)
// const open = ref < boolean > (showModal.value);
const modalTitleRef = ref<HTMLElement>(null);

const {x, y, isDragging} = useDraggable(modalTitleRef);
const handleOk = (e: MouseEvent) => {
  console.log(e);
  storeCommomStore.setShowModal()

  // open.value = false;
};

const startX = ref<number>(0);
const startY = ref<number>(0);
const startedDrag = ref(false);
const transformX = ref(0);
const transformY = ref(0);
const preTransformX = ref(0);
const preTransformY = ref(0);
const dragRect = ref({left: 0, right: 0, top: 0, bottom: 0});

watch([x, y], () => {
  if (!startedDrag.value) {
    startX.value = x.value;
    startY.value = y.value;
    const bodyRect = document.body.getBoundingClientRect();
    const titleRect = modalTitleRef.value.getBoundingClientRect();
    dragRect.value.right = bodyRect.width - titleRect.width;
    dragRect.value.bottom = bodyRect.height - titleRect.height;
    preTransformX.value = transformX.value;
    preTransformY.value = transformY.value;
  }
  startedDrag.value = true;
});
watch(isDragging, () => {
  if (!isDragging) {
    startedDrag.value = false;
  }
});

watchEffect(() => {
  if (startedDrag.value) {
    transformX.value =
        preTransformX.value +
        Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) -
        startX.value;
    transformY.value =
        preTransformY.value +
        Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) -
        startY.value;
  }
});
const transformStyle = computed<CSSProperties>(() => {
  return {
    transform: `translate(${transformX.value}px, ${transformY.value}px)`,
  };
});


const columns = [
  {
    title: '序号',
    dataIndex: 'name',
  },
  {
    title: '模型名称',
    dataIndex: 'age',
    width: 100
  },
  {
    title: '中文名称',
    dataIndex: 'address',
    width: 100
  },
  {
    title: '材料',
    dataIndex: 'address',
  },
  {
    title: '数量',
    dataIndex: 'address',
  }, {
    title: '备注',
    dataIndex: 'address',
  },
];

const data = [...Array(2)].map((_, i) => ({
  key: i,
  name: `E${i}`,
  age: 32,
  address: `${i}`,
}));
</script>
<style scoped lang="scss">
.mores {
  width: 100%;
  height: 30px;
  background: rgba(249, 251, 255, 1);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
  padding: 4px 0px 4px 20px;
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.moresRight {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 20px;

  img {
    width: 14px;
    height: 14px;
    margin-left: 10px;
    cursor: pointer;
  }
}

::v-deep(.ant-modal-content) {
  padding: 0 !important;
  border-radius: 0px;
  resize: both;
  overflow: auto;
}

.pading20 {
  padding: 20px;
}

::v-deep(.ant-table-thead >tr>td) {
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-size: 12px;
}

::v-deep(.ant-table-tbody>tr>td) {
  padding: 5px 16px !important;
}

.titles {
  height: 30px;
  background: rgba(230, 248, 250, 1);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
  padding: 4px 0px 4px 13px;
}

.mtop30 {
  margin-top: 30px;
}
</style>